<template>
  <div>
    <view class="list padding padding-top-xs padding-left-0">
      <view class="item bg-white radius-lg  margin-bottom-sm crow" v-for="(item,index) in showList" :key="index">
        <view class="left avatar margin-left-sm">
          <image :src="item.avatar" mode="heightFix" class="img"></image>
        </view>
        <view class="right">
          <view class="top crow space-between">
            <view class="left-box">
              <text class="padding-right-mn text-black text-bold">{{item.nickname}}</text>
              <text :class="item.isLove ? 'text-red cuIcon-likefill' : 'cuIcon-like'"></text>
            </view>
            <view class="status crow radius">
              <view class="zuizao">
                最早可约
              </view>
              <view class="time">
                今{{item.serviceTime}}
              </view>
            </view>
          </view>
          <view class="center text-sm text-gray crow space-between">
            <view class="left-box">
              <!--							<text class="cuIcon-shop"></text>-->
              <!--							<text class="padding-left-mn">{{item.store}}</text>-->
            </view>
            <view class="right-box crow">
              <u-icon name="map" size="24" color="gray"></u-icon>
              <span style="margin-left: 10rpx">{{item.juli}}</span>
            </view>
          </view>
          <view class="bottom text-gray text-sm crow space-between">
            <view class="crow">
              <view class="solid-right padding-right">
                <text class="cuIcon-form themeColor"></text>{{ item.orderGoods.length}}
              </view>
              <view class="solid-right padding-lr">
                <text class="cuIcon-friend themeColor"></text>{{ item.staffCollects.length}}
              </view>
              <view class="padding-left">
                <text class="cuIcon-message themeColor"></text>{{ item.staffComments.length}}
              </view>
            </view>
            <view class="right-box">
              <view class="liji" @click="toUrl('/pages/partner/detail?id=' + item.id)">
                <div class="cu-btn round sm bg-primary" style="color: #ffffff">立即预约</div>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getList()
  },
  computed: {
    showList() {
      return this.list
    }
  },
  methods:{
    getList(){
      let _this = this
      this.$http.getTechnicianList().then(res => {
        wx.getLocation({
          type: 'wgs84',
          success: (_res) => {
            console.log(res)
            _this.list = res.map(item => {
              return {
                ...item,
                juli: _this.getDistance(_res.latitude, _res.longitude, res.latitude, res.longitude),
                serviceTime: item.order_time || '暂无',
              }
            })
          },
          fail: (err) => {
            console.log(err)
            this._this = res.map(item => {
              return {
                ...item,
                juli: '暂无',
                serviceTime: item.order_time || '暂无',
              }
            })
          }
        })
      })
    },

    Rad(d) { //根据经纬度判断距离
      return d * Math.PI / 180.0;
    },
    getDistance(lat1, lng1, lat2, lng2) {
      if (!lat1 || !lng1 || !lat2 || !lng2) {
        return '0m'
      }
      if (lat1 == lat2 && lng1 == lng2) {
        return "0m";
      }
      // lat1用户的纬度
      // lng1用户的经度
      // lat2客服的纬度
      // lng2客服的经度
      var radLat1 = this.Rad(lat1);
      var radLat2 = this.Rad(lat2);
      var a = radLat1 - radLat2;
      var b = this.Rad(lng1) - this.Rad(lng2);
      var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
      s = s * 6378.137;
      s = Math.round(s * 10000) / 10000;
      s = s.toFixed(2) + 'km' //保留两位小数
      console.log('经纬度计算的距离:' + s)
      return s
    },
  },
}
</script>
<style lang="less" scoped>
.list{
  .item{
    height: 200upx;
    .avatar{
      position: relative;
      width: 80upx;
      height: 80upx;
      display: flex;
      align-items: center;
      margin-right: 10rpx;
      .img{
        width: 80upx;
        height: 80upx;
        border-radius: 50%;
      }
      .title-img{
        width: 210upx;
        height: 175upx;
        position: absolute;
        left: -20rpx;
      }
    }
    .right{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 150upx;
      .top{
        .status{
          border: 2rpx solid var(--theme-color);
          font-size: 20rpx;
          .zuizao{
            background-color: var(--theme-color);
            padding: 5rpx;
            border-top-right-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
            color: white;
          }
          .time{
            padding: 5rpx;
          }
        }
      }
    }
  }
}
.liji{
  button{
    background: var(--theme-bg-color);
    color: white;
  }
}
</style>
